<!--
 * @Author: wangzz wangzhuang@outlook.com
 * @Date: 2024-02-23 09:13:08
 * @LastEditors: wangzz wangzhuang@outlook.com
 * @LastEditTime: 2024-02-23 09:24:49
 * @FilePath: \LearnSpace\canvas_demo\basedemo\canvasToImg.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="canvas" width="800" height="800"></canvas>

  <script>
    const canvasDom = document.getElementById('canvas')
    const drawer = canvasDom.getContext('2d')

    let index = 0;
    let radianGradient = drawer.createRadialGradient(300, 200, 0, 300, 200, 100);
    
    radianGradient.addColorStop(0, 'red')
    radianGradient.addColorStop(0.3, '#fffccc')
    radianGradient.addColorStop(1, 'blue')
    drawer.fillStyle = radianGradient
    // drawer.fillRect(0, 0, 600, 400)
    drawer.arc(300, 200, 100, 0, Math.PI * 2)
    drawer.fill();

    // 返回值Data URLs是一种前缀为data:协议的URL
    // 允许内容的创建者在文档中嵌入小文档
    let dataUrl = canvasDom.toDataURL();
    console.log("dataUrl: ", dataUrl)
    // // 全质量
    let fullQuality = canvasDom.toDataURL('image/jpeg', 1);
    document.write('<img src="' + fullQuality + '">');
 
  </script>
</body>

</html>
<!--
HTML5 Canvas API的toDataUrl()的使用
返回一个包含图片展示的 data URL。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。
canvas.toDataURL(type, encoderOptions);
- type 可选 default: image/png
- encoderOptions: 在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。
// 1 - 全质量 0.5 - 半质量 0.1 低质量

-->